<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:28:22
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <AppPage show-footer>
    <div class="flex">
      <div class="w-50% flex items-center">
        <n-card class="min-w-200 w-30% h-full" title="活跃统计">
          <div class="flex flex-col justify-center">
            <div class="mb-16 text-16">今日活跃：{{ todayActiveStatistic.total }}</div>
            <div class="text-16">昨日活跃：{{ yestodayActiveStatistic.total }}</div>
          </div>
        </n-card>
        <n-card class="ml-12 min-w-200 w-70% h-full">
          <div class="flex items-center">
            <n-avatar round :size="60" :src="userStore.avatar" class="flex-shrink-0" />
            <div class="ml-20 flex-col">
            <span class="text-20 opacity-80">
              Hello, {{ userStore.nickName ?? userStore.username }}
            </span>
              <span class="mt-4 opacity-50">当前角色：{{ userStore.currentRole?.name }}</span>
            </div>
          </div>

          <p class="mt-28 text-14 opacity-60">一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
          <p class="mt-12 text-right text-12 opacity-40">—— 查尔斯·史考伯</p>
        </n-card>
      </div>
      <n-card class="ml-12 w-50%" title="✨ 欢迎使用 演奏助手">
        <template #header-extra>
          <a
            class="text-14 text-primary text-highlight hover:underline hover:opacity-80"
            href="https://autoplay.chimomo.cn"
            target="_blank"
          >
            演奏助手官网
          </a>
        </template>

        <p class="opacity-60">
          如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
          996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，
          <br />
          你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？
        </p>
        <footer class="mt-12 flex items-center justify-end">
          <n-button
            type="primary"
            class="ml-12"
            tag="a"
            href="https://github.com/zclzone/vue-naive-admin/tree/2.x"
            target="__blank"
            @click.prevent="message?.info('正在通往成功之路，请稍等...')"
          >
            通往成功之路
          </n-button>
        </footer>
      </n-card>
    </div>
    <div class="mt-12 flex">
      <n-card class="w-50%" title="上传TOP10" segmented>
        <VChart :option="top10Option" :init-options="{ height: 400 }" autoresize />
      </n-card>

      <n-card class="ml-12 w-50%" title="曲谱分类统计" segmented>
        <VChart :option="skillOption" autoresize />
      </n-card>
    </div>

    <n-card class="mt-12" title="曲谱上传趋势" segmented>
      <VChart :option="trendOption" :init-options="{ height: 400 }" autoresize />
    </n-card>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent, TitleComponent } from 'echarts/components'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { find, map } from 'lodash-es'
import VChart from 'vue-echarts'
import api from './api'
import dayjs from "dayjs";

const userStore = useUserStore()

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  PieChart,
])

const todayActiveStatistic = ref({ total: 0 })
const yestodayActiveStatistic = ref({ total: 0 })
async function getDailyActiveStatistic() {
  const today = dayjs().format('YYYY-MM-DD')
  const yesterday = dayjs(today).subtract(1, 'd').format('YYYY-MM-DD')
  const { data } = await api.getDailyActiveStatistic(`${today},${yesterday}`)
  if (data.length === 2) {
    todayActiveStatistic.value = find(data, item => item.date === today)
    yestodayActiveStatistic.value = find(data, item => item.date === yesterday)
  }
}

const typeStatistic = ref([
  { value: 0, name: 'MIDI曲谱' },
  { value: 0, name: 'MML曲谱' },
  { value: 0, name: '懒声曲谱' },
])
async function getTypeStatistic() {
  const { data } = await api.getTypeStatistic()
  typeStatistic.value = data
}

const trendStatistic = ref([])
const trendXAxisData = computed(() => map(trendStatistic.value?.[0]?.data, (t) => t.yearMonth))
const allTrendYAxisData = computed(() =>
  map(find(trendStatistic.value, (item) => item.code === 'all')?.data, (t) => t.count),
)
const midiTrendYAxisData = computed(() =>
  map(find(trendStatistic.value, (item) => item.code === 'midi')?.data, (t) => t.count),
)
const mmlTrendYAxisData = computed(() =>
  map(find(trendStatistic.value, (item) => item.code === 'mml')?.data, (t) => t.count),
)
const jmyTrendYAxisData = computed(() =>
  map(find(trendStatistic.value, (item) => item.code === 'jmy')?.data, (t) => t.count),
)

async function getTrendStatistic() {
  const now = new Date()
  const start = new Date(2021, 0)
  const end = new Date(now.getFullYear(), now.getMonth())
  const { data } = await api.getTrendStatistic(start.getTime(), end.getTime())
  trendStatistic.value = data
}

const top10Data = ref([])
async function getTop10() {
  const { data } = await api.getTop10()
  top10Data.value = data
}

const top10Option = computed(() => {
  return {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '0',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: map(top10Data.value, (item) => item.username).reverse(),
    },
    series: [
      {
        name: '上传top10',
        type: 'bar',
        data: map(top10Data.value, (item) => item.total).reverse(),
      },
    ],
  }
})

const trendOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      top: '5%',
      data: ['总上传趋势', 'MIDI曲谱上传趋势', 'MML曲谱上传趋势', '懒声曲谱上传趋势'],
    },
    xAxis: [
      {
        type: 'category',
        data: trendXAxisData.value,
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        interval: 500,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        min: 0,
        max: 500,
        interval: 100,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '总上传趋势',
        type: 'line',
        data: allTrendYAxisData.value,
      },
      {
        name: 'MIDI曲谱上传趋势',
        type: 'line',
        data: midiTrendYAxisData.value,
      },
      {
        name: 'MML曲谱上传趋势',
        type: 'line',
        data: mmlTrendYAxisData.value,
      },
      {
        name: '懒声曲谱上传趋势',
        type: 'line',
        data: jmyTrendYAxisData.value,
      },
    ],
  }
})

const skillOption = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      left: 'center',
    },
    series: [
      {
        top: '12%',
        type: 'pie',
        radius: ['35%', '90%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 36,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: typeStatistic.value,
      },
    ],
  }
})

onMounted(() => {
  getDailyActiveStatistic()
  getTypeStatistic()
  getTrendStatistic()
  getTop10()
})

const message = $message
</script>
